<template>
	<view class="u-rich-text">
		<rich-text :nodes="nodes"></rich-text>
	</view>
</template>

<script setup lang="ts">
	import { ref, watch } from 'vue'
	const nodes = ref('')
	const props = defineProps<{
		html:string
	}>()
	
	watch(() => props.html, (newValue) => {
		let newContent = newValue.replace(/<img[^>]*>/gi, function(match, capture) {
			match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
			match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
			match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
			return match;
		});
		newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
			match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
			return match;
		});
		newContent = newContent.replace(/<br[^>]*\/>/gi, '');
		newContent = newContent.replace(/\<img/gi,
			'<img style="max-width:100%;height:auto;display:inline-block;margin:5px 0;"');
		nodes.value = newContent
	})
</script>

<style lang="scss" scoped>

</style>